// import { Image } from '@arco-design/web-react';
import { VideoPlayer, Button, ButtonGroup, Image } from "@douyinfe/semi-ui";
import { forwardRef } from 'react';
import deleteIcon from "@/assets/images/imageEdit/delete.svg";
import download from "@/assets/images/imageEdit/download.svg";
import layerEditIcon from "@/assets/images/imageEdit/layer_edit_icon.svg";
import imageIcon from "@/assets/images/imageEdit/image_icon.svg";
import copy from "@/assets/images/imageEdit/copy.svg";
import styles from "./resultList.module.scss";

const Results = forwardRef(({ 
  resultsItemRefs,
  currentMenuKey,
  currentMenuTitle,
 }, ref) => {
  const resultsData = [
    {
      title: currentMenuTitle,
      device: "可灵大师2.1版",
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: currentMenuTitle,
      device: "可灵大师2.1版",
      quality: "720p",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    }
  ];
  const BTN_TYPE = [
    // {
    //   type: 'creat',
    //   icon: copy,
    //   text: '重新生成',
    // },
    // {
    //   type: 'edit',
    //   icon: layerEditIcon,
    //   text: '数字绘景编辑',
    // },
    {
      type: 'downlaod',
      icon: download,
      text: '下载',
    },
    {
      type: 'delete',
      icon: deleteIcon,
      text: '删除',
    },
  ];

  const renderResultsImgItem = () => (
    <div className={styles.resultsImgItem}>
      <div className={styles.maskLayer}>
        <div className={styles.maskTool}>
          <Image className={styles.maskLayerImg} src={deleteIcon} preview={false} draggable={false} />
          <Image className={styles.maskLayerImg} src={download} preview={false} draggable={false} />
        </div>
        <div className={styles.maskEdit}>
          <div className={styles.maskleft}>
            <Image className={styles.maskLayerImg} src={layerEditIcon} preview={false} draggable={false} />
            <div>图层编辑</div>
          </div>
          <div className={styles.maskSeparate}></div>
          <div className={styles.maskRight}>
            <Image className={styles.maskLayerImg} src={imageIcon} preview={false} draggable={false} />
            <div>图像编辑</div>
          </div>
        </div>
      </div>
      <Image className={styles.img} src={''} preview={false} draggable={false} />
    </div>
  );

  return (
    <div className={styles.results} ref={ref}>
      {resultsData.map((item, index) => (
        <div key={index} className={styles.resultsItem} ref={el => resultsItemRefs.current[index] = el}>
          <div className={styles.resultsHead}>
            <div className={styles.resultsHeadLeft}>
              <div className={styles.resultsHeadTitle}>{item.title}</div>
              <div className={styles.separate}></div>
              <div className={styles.resultsHeadText}>
                <div className={styles.thumbnail} style={{width: 102}}>
                  <Image className={styles.img} src={''} preview={false} draggable={false} />
                  <span>首尾帧</span>
                  <Image className={styles.img} src={''} preview={false} draggable={false} />
                </div>
                <div className={styles.tabText}>{item.device}</div>
                <div className={styles.tabText}>{item.quality}</div>
                <div className={styles.tabText}>{item.ratio}</div>
              </div>
            </div>
            {/* <div className={styles.resultsHeadTime}>{item.time}</div> */}
          </div>
          <div className={styles.resultsContent}>
            {item.content}
            <Image className={styles.img} src={copy} preview={false} draggable={false} />
          </div>
          
          <VideoPlayer
              height={630} 
              src={"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4"}
              poster={"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg"}
              controlsList={['play', 'time', 'fullscreen']}
          />

          <div className={styles.resultsOptBtns}>
            {BTN_TYPE.map(item => (
                <div className={styles.btnBox} key={item.type}>
                    <Button style={{ fontWeight: 400, color: '#fff', opacity: 0.8 }} icon={<>
                        <Image className={styles.img} src={item.icon} preview={false} draggable={false} />
                    </>} type={'tertiary'} >{item.text}</Button>
                </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
});

Results.displayName = 'Results';

export default Results;